<template>
  <div id="numBox" class="mui-numbox" data-numbox-step='1' data-numbox-min='0' data-numbox-max='100'>
    <button class="mui-btn mui-numbox-btn-minus" type="button" @click='numMinus'>-</button>
    <input class="mui-numbox-input" type="number" v-model='number' />
    <button class="mui-btn mui-numbox-btn-plus" type="button" @click='numPlus'>+</button>
  </div>
</template>

<script>
  export default {
    name: "mh-numbox",
    data(){
      return {
        number: 1
      }
    },
    methods: {
      numMinus(){
        if(this.number > 1){
          this.number = this.number - 1;
          this.$parent.getNum(this.number)
        }
      },
      numPlus(){
        this.number = this.number + 1;
        this.$parent.getNum(this.number)
      }
    },
    created () {
      this.$nextTick(function() {
        mui('#numBox').numbox()
      });
    }
  }
</script>

<style lang="scss" scoped>

</style>
